<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>

<input id="ctl00_ToolkitScriptManager1_HiddenField" type="hidden">

<div class="with-head">
	<div class="with-padding" style="height: 100%; overflow: auto; color: Black;">
		<div>
			<div class="block-border" style="background-color: #efefef;">
				<div class="block-content">
					<h1>
						<span>${requestScope.classes.classesId == 0 ? 'Add' : 'Edit'} Class</span>
					</h1>			
					<div>						
						<table width="100%">
							<tbody>
								<tr>
									<td style="width: 10px;">
										&nbsp;
									</td>											
									<td align="right">
										<a title="Add" href="${contextPath}/setupClassSectionManagementForm.ems">
											<img src="${imagePath}/add.png" style="border-width: 0px;"> 
										</a>
										&nbsp;
										<a title="Edit" href="javascript:getClassDetails('${applicationScope.contextPath}','classesSelectBoxId')">
											<img src="${imagePath}/edit.png" style="border-width: 0px;"> 
										</a>
									</td>
									<td style="width: 10px;">
										&nbsp;
									</td>
								</tr>
								<tr>
									<td>
									</td>
									<td colspan="2">
										<br>
										<fieldset class="grey-bg">
											<legend>
												<a href="#">Please select</a>
											</legend>
											<div class="float-left gutter-right">
												<span class="label">Classes:</span>
												<select id="classesSelectBoxId">
													<c:forEach var="classes" items="${classesList}">
														<option value="${classes.classesId}">
															${classes.classesName} [ ${classes.classesNumber} ]
														</option>
													</c:forEach>
												</select>
												&nbsp;
												<input value="Edit" class="button" type="button" onclick="getClassDetails('${applicationScope.contextPath}','classesSelectBoxId')">
											</div>
										</fieldset>
										<br />
										<form:form action="saveClassSection.ems" method="POST" commandName="classes">
											<div>
												<fieldset class="white-bg">
													<legend>
														<span class="label">Add Course</span>
													</legend>
													<table class="table" width="100%">
														<tbody>
															<tr>
																<td width="200">
																	<span class="label">Course</span> Name:
																</td>
																<td>
																	<form:hidden path="classesId" />
																	<form:input path="classesName" maxlength="75" cssStyle="width: 200px;"/>
																</td>
															</tr>
															<tr>
																<td width="200">
																	Course No.
																</td>
																<td>
																	<form:input path="classesNumber" maxlength="20"/>																	
																</td>
															</tr>
															<tr>
																<td width="200">
																	Add sections/teachers to the
																	<span class="label">Course</span>
																</td>
																<td>
																	<table class="mytable smaller" width="100%">
																		<thead>
																			<tr>
																				<th style="width: 20px;">
																					#
																				</th>
																				<th style="width: 100px;">
																					Section Name
																				</th>
																				<th>
																					Select Teacher
																				</th>
																			</tr>
																		</thead>
																		<tbody>
																			<c:forEach var="sectionIndex" begin="0" end="9" step="1">
																				<tr>
																				<td style="width: 10px ! important;">
																					${sectionIndex + 1}
																				</td>
																				<td style="width: 70px ! important;">
																					<form:input path="sections[${sectionIndex}].sectionName" maxlength="20"/>
																				</td>
																				<td>
																					<form:select path="sections[${sectionIndex}].teacherId">
																						<form:option value="0">
																							Please select
																						</form:option>
																						<c:forEach var="teacher" items="${staffList}">
																							<form:option value="${teacher.staffId}">
																								${teacher.firstName} ${teacher.middleName} ${teacher.lastName} [ ${teacher.staffNumber} ]
																							</form:option>
																						</c:forEach>
																					</form:select>
																				</td>
																			</tr>
																			</c:forEach>
																		</tbody>
																	</table>
																</td>
															</tr>
															<tr>
																<td>
																	&nbsp;
																</td>
																<td>
																	<c:choose>
																		<c:when test="${requestScope.classes.classesId == 0}">
																			<input value="Save" class="button" type="submit">
																		</c:when>
																		<c:otherwise>
																			<input value="Update" class="button" type="submit">
																			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
																			<input value="Delete" class="button" type="button" onclick="deleteClass('${applicationScope.contextPath}','${requestScope.classes.classesId}')">
																		</c:otherwise>
																	</c:choose>																	
																	&nbsp;
																</td>
															</tr>
														</tbody>
													</table>
												</fieldset>
											</div>
										</form:form>
									</td>
									<td>
									</td>
								</tr>
								<tr>
									<td>
										&nbsp;
									</td>
									<td colspan="2">
										&nbsp;
									</td>
									<td>
										&nbsp;
									</td>
								</tr>
								<tr>
									<td>
										&nbsp;
									</td>
									<td colspan="2">
										&nbsp;
									</td>
									<td>
										&nbsp;
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>